<div class="panel panel-default" style="margin-bottom:0px;">
    <div class="panel-heading" role="tab" style="padding:0px;" [ngClass]="{'expandedBorderBottom': expanded == true, 'expanded-event-header': expanded === true}">
        <span class="panel-title row" style="margin: 0px;">
            <a #panelLink *ngIf="canExpand == true" href="{{'#collapse'+ indicatorIndex}}" (click)='collapseToggle()' data-toggle="collapse"
                class="accordion-toggle collapsed col-md-1 expandLink">&nbsp;</a>
            <span (click)='clickToToggle()' class="tableRow" [ngClass]="{'col-md-11 expandable': canExpand == true, 'col-md-12': canExpand !== true}">
                <div class="col-md-3 rowHeader">
                    <span class="row" style="margin:0px">
                        <a *ngIf="!canExpand" [routerLink]="['../mei', indicator.externalId, indicator.type]">
                            <span *ngIf="indicator.externalId !== undefined" class="col-md-2" style="padding:0px;">
                                <img [src]="resourcesUrl + '/' + (indicator.type == 'IdiosyncraticIssue' ? 999 : indicator.externalId) + '_black_large.png'" height="36" />
                            </span>
                            <div [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">
                                {{ indicator.name }}
                            </div>
                        </a>

                        <div *ngIf="!canExpand" [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">
                            <div class="issue-label" *ngIf="indicator.isMain">
                                Key Issue
                            </div>

                            <div *ngIf="indicator.events">                                
                                <div *ngFor="let event of indicator.events" 
                                [routerLink]="['../mei', indicator.externalId, indicator.type]" fragment="{{getUrlFriendlyName(event.code)}}" 
                                style="font-size:8pt;margin-bottom:5px;cursor: pointer;">                                    
                                    <img [src]="resourcesUrl + '/icon_event_cat_' + event.category + '_small.png'" height="16" /> {{event.categoryText}}: {{event.name}}                                    
                                </div>
                            </div>
                        </div>

                        <div *ngIf="canExpand">
                            <span *ngIf="indicator.externalId !== undefined" class="col-md-2" style="padding:0px;">
                                <img [src]="resourcesUrl + '/' + indicator.externalId + '_black_large.png'" height="36" />
                            </span>
                            <span [ngClass]="{'col-md-10': indicator.externalId !== undefined }" style="padding-right: 0px;">{{indicator.name}}</span>
                        </div>
                    </span>
                    <span *ngIf="subTitle" class="row" style="margin:40px 0 0 0; font-size:9pt; display: block">
                        <b>{{subTitle}}</b>
                    </span>
                </div>
                <div class="col-md-9 borderLeft chartCell">
                    <div class="chartCell" *ngFor="let column of columns; let i = index" [ngClass]="{'highlightCell': column.highlight, 'col-md-3':columns.length === 4, 'col-md-4':columns.length === 3, 'borderLeft':i > 0}"
                        style="padding-left:0px;">                        
                        <div *ngIf="column.showChart" issueChart [chartID]="column.valueField + '_' + indicatorIndex" [chartData]="indicator[column.valueField].value"
                            [chartLimit]="indicator[column.valueField].average" [showAxis]="showAxis" [color]="column.chartColor"
                            [maxRating]="column.maxRating" [limitImage]="column.limitImage" class="col-md-6 issueChart">
                            <div id="{{column.valueField + '_' + indicatorIndex}}" class='issuesChart'></div>
                        </div>
                        <div *ngIf="column.showChart" class="col-md-6 issueRating">
                            <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}"> 
                                {{formatValue(indicator, column)}}
                            </span>
                            <span *ngIf="indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                                {{indicator[column.valueField].clusterName}}
                            </span>
                        </div>

                        <div *ngIf="!column.showChart">
                            <div style="padding-left: 20px; padding-top: 3px;">
                                <span *ngIf="column.showRating" [ngClass]="{'boldRating': column.boldRating}">                                                                                                       
                                    {{formatValue(indicator, column)}}                                    
                                </span>
                                <span *ngIf="indicator[column.valueField].clusterName" [ngClass]="{'boldRating': column.boldRating}">
                                    {{indicator[column.valueField].clusterName}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </span>
        </span>
    </div>
    <div id="{{'collapse'+ indicatorIndex}}" class="panel-collapse collapse">
        <div class="panel-body expanded-event" *ngIf="indicatorDetails != undefined">
            <div class="row" style="padding: 5px 10px">
                <div class="col-sm-6">
                    <div style="font-size: 1.2em;">
                        <strong>
                            <span *ngIf="displayCode">{{ indicator.code | strReplace:'_':'.' }} </span>
                            {{ indicator.name }}
                        </strong>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row" *ngIf="indicator.weightedScore">
                        <div class="col-sm-3">
                            <span style="font-size: 1.4em;">
                                {{ indicator.score.value | number:'1.0-0' }}
                            </span>
                            <div>Raw Score</div>
                        </div>
                        <div class="col-sm-1">
                            <span style="font-size: 1.2em;">x</span>
                        </div>
                        <div class="col-sm-2">
                            <span>{{ indicator.weight.value | number:'1.1-2' }}%</span>
                            <div>Weight</div>
                        </div>
                        <div class="col-sm-1">
                            <span style="font-size: 1.2em;">=</span>
                        </div>
                        <div class="col-sm-4">
                            <span>{{ indicator.weightedScore.value | number:'1.1-1' }}</span>
                            <div>Weighted Score</div>
                        </div>
                    </div>
                </div>
            </div>

            <div *ngIf="indicatorDetails.answerCategoryText" class="text-center">
                <hr />
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div style="font-size: 1.2em;">{{ indicatorDetails.answerCategoryText }}</div>
                    </div>
                </div>
            </div>

            <div style="padding: 0px 15px 15px">
                <div class="row" *ngIf="indicatorDetails.comment">
                    <div class="col-sm-12">
                        <hr />
                        <div [innerHtml]="indicatorDetails.comment"></div>
                    </div>
                </div>

                <div class="row">
                    <div *ngIf="indicatorDetails.checkBoxes.length > 0" class="col-md-12">
                        <hr />
                        <strong>Criteria</strong>
                    </div>
                    <div *ngFor="let group of tickboxGroups" class="col-sm-6">
                        <div *ngFor="let checkbox of group">
                            <input type="checkbox" disabled="disabled" [checked]="checkbox.isChecked" style="float: left; width: 15px; margin-right: 3px;"
                            />
                            <label style="float: left; width: 95%; font-weight: normal;">{{ checkbox.text }}</label>
                        </div>
                    </div>
                </div>
            </div>

            <div style="padding: 0px 15px 15px">
                <div class="row">
                    <div *ngIf="indicatorDetails.sources?.length > 0" class="col-md-12">
                        <hr />
                        <div>
                            <strong>Sources</strong>
                        </div>
                    </div>
                    <div *ngFor="let source of indicatorDetails.sources" class="col-md-12">{{ source }}</div>
                </div>
            </div>

        </div>
    </div>
</div>